<template>
  <div :class="className" :style="{height: height, width: width}"
  />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import ResizeMixin from './mixins/resize'

export default {
  name: 'IotLineChart',
  mixins: [ResizeMixin],
  props: {
    chartData: {
      required: true
    },
    className: {
      default: 'chart'
    },
    width: {
      default: '100%'
    },
    height: {
      default: '340px'
    }
  },
  data() {
    return {
      nameList: [],
      chart: null
    }
  },
  mounted() {
    setTimeout(() => {
      this.$nextTick(() => {
        this.initChart()
      })
    }, 10)
  },

  watch: {
    // chartData: {
    //   handler(newVal, oldVal) {
    //     this.chartsDataes()
    //     this.setOptions(newVal)
    //   },
    //   deep: true
    // }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    chartsDataes() {
      const colorList = ['rgba(255,87,87,1)','rgba(85,203,255,1)','rgba(86,133,255,1)','rgba(87,206,158,1)','rgba(255,152,64,1)','rgba(255,87,87,1)','rgba(85,203,255,1)',]
      const shadowColorList = ['rgba(255,87,87,0.4)','rgba(85,203,255,0.4)','rgba(86,133,255,0.4)','rgba(87,206,158,0.4)','rgba(255,152,64,0.4)','rgba(255,87,87,0.4)','rgba(85,203,255,0.4)',]
      const seriesData = {
        showSymbol:false,
        itemStyle: {
          color: '#00FF5A',
        },
        lineStyle: {
          color: '#FF005A',
          width: 3,
          shadowColor: 'rgba(0,0,0,0.3)',
          shadowBlur: 10,
          shadowOffsetY: 10
        },
        smooth: true,
        type: 'line',
        animationDuration: 2800,
        animationEasing: 'cubicInOut'
      }
      let setSerise = null
      setSerise = this.chartData.series.map( (val) => {
        return Object.assign(val, seriesData)
      })
      setSerise = setSerise.map((element, index) => {
        element.itemStyle = {color:colorList[index]}
        element.lineStyle = {
          color: colorList[index],
          width: 4,
          shadowColor:shadowColorList[index],
          shadowBlur: 10,
          shadowOffsetY: 10
        }
        return element
      });
      this.chartData.series = setSerise
      this.nameList = Array.isArray(this.chartData.series) ? this.chartData.series.map((item) => item.name) : []
    },
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chartsDataes()
      this.setOptions(this.chartData)
    },
    setOptions(chartData) {
      if (this.chart) {
        this.chart.setOption({
          xAxis: {
            type: 'category',
            data: chartData.xdata,
          },
          yAxis: {
            splitLine:{
              lineStyle:{
                type: 'dashed'
              },
              show:true
            }
          },
          grid: {
            left: 10,
            right: 10,
            bottom: 30,
            top: 20,
            containLabel: true
          },
          legend: {
            bottom: 0,
            itemWidth: 6,
            itemGap:20,
            icon:"circle",
            data: this.nameList,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer:{
              lineStyle:{
                width: 0
              }
            },
            backgroundColor: 'rgb(255, 255, 255, 0.8)',
            shadowColor: 'rgb(0, 0, 0, 0.8)',
            shadowBlur: 10,
            padding: 10,
            textStyle:{
              color: '#666',
            },
            extraCssText: 'box-shadow: 0 0 10px rgba(150, 150, 150, 0.4)'
          },
          series: chartData.series
        })
      }
    }
  }
}
</script>
